<script lang="ts" setup>
import { useModal, useNavBack } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { object as zobject, string as zstring } from 'zod'

const src = ref('')

onLoad(async (query) => {
  const zparse = zobject({
    src: zstring().startsWith('http'),
  }).safeParse(query)
  if (!zparse.success) {
    return
  }

  src.value = zparse.data.src ?? ''
})

async function onError() {
  await useModal({
    title: '提示',
    content: '播放出错',
    showCancel: false,
    confirmText: '返回',
  })
  useNavBack()
}
</script>

<template>
  <view class="h-100vh w-full bg-black safe-pb">
    <video id="myVideo" class="h-full w-full" :src="src" controls @error="onError"></video>
  </view>
</template>

<style lang="less" scoped></style>
